<template>
	
	<view class="notice">
		<uni-breadcrumb separator="/">
			<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
				{{route.name}}
			</uni-breadcrumb-item>
		</uni-breadcrumb>
		
		<uni-forms ref="form" :rules="rules" style="margin:10px 0;" :model="formData" validateTrigger="blur" label-width="300">
			<uni-forms-item name="title" style="font-weight: bold;font-size:25px;">
				<uni-easyinput v-model="formData.title" style="font-size:50px;text-align: center;"  placeholder="输入标题" ></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="content" label="">
				<view class="editor" >
					 <webEdit v-model="formData.content" @blurEdit="onBlurEdit" placeholder="公告内容" ids="content"  style="width:100%;"></webEdit>
				</view>
			</uni-forms-item>
			<!-- <uni-forms-item name="shop_id" label="指定店铺可查看">
				213
			</uni-forms-item> -->
			<uni-forms-item name="images" label="封面主图:">
				<uni-file-picker v-model="formData.images" limit="3" title=" " :image-styles="imagestyle"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item name="abstract" label="公告摘要:">
				<uni-easyinput type="textarea" v-model="formData.abstract"></uni-easyinput>
			</uni-forms-item>
			<view >
				<uni-forms-item class="platform_type" name="type" label="公告类型:">
					<radio-group @change="radioChange" class="pagetitle" style="border:none;">
						<label class="pagetitle" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index+1 === formData.type.value" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</uni-forms-item>
			</view>
			<view>
				<uni-forms-item class="platform_type" name="type" label="筛选分发:">
					<view class="target" >
						<view class="item"
							:style="`${_uid?'cursor:not-allowed':''}`"
							v-for="(item,index) in target" :key="index" 
							@click="onTarget(index)"
							:class="index === targetIndex ? 'itemTow':'' "
						>
							{{item}}
						</view>
					</view>
					<swiper class="swiper"  :current="targetIndex"  disable-touch >
							<swiper-item item-id="1"  class="swiper-item" >
								<scroll-view  :scroll-y="true" class=""  >
									<view >
										<checkbox-group  @change="onMultipleData" class="scroll-T">
											<view v-for="(item,index) in towshipData" :key="index" >
												<label class="item" >
													<checkbox :value="item"	  :checked="false" />{{item.text}}
												</label>
											</view>
										</checkbox-group>
									</view>
								</scroll-view>
							</swiper-item>
							<swiper-item item-id="2" class="swiper-item " >
								<view class="search">
									<uni-easyinput errorMessage v-model="searchVal"  placeholder="搜索内容(可搜:店名,店联系方式)" ></uni-easyinput>
									<button size="mini" @click="eventSearch" >
										搜索
									</button>
								</view>
								<scroll-view :scroll-top="scrollTop" @scrolltolower="scrollBottom" scroll-y="true" class="scroll-y" >
									<view  class=" " >
										<checkbox-group  @change="onMultipleData" class="scroll-H">
											<view v-if="_uid" >
												<label class="item"  >
													<checkbox :value="aloneData" disabled=""	:checked="true" />
													<view>
														<image v-if="aloneData.logo" :src="aloneData.logo.url+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
													</view>
													<view class="_content">
														{{aloneData.title}}
													</view>
												</label>
											</view>
											<label
												v-for="(item,index) in personData" class="item" :key="index" 
												v-show="item._id._value === _uid?false:true"
											>
												<checkbox :value="item"	:disabled="item._id._value === _uid"  :checked="false" />
												<view>
													<image v-if="item.logo" :src="item.logo.url+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
												</view>
												<view class="_content">
													{{item.title}}
												</view>
											</label>
										</checkbox-group>
									</view>
									<view style="padding:70px 0 ;text-align: center;">
									</view>
								</scroll-view>	
							</swiper-item>
					</swiper>
				</uni-forms-item>
			</view>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>
<script>
	import {publicData,publicFun} from "./store.js"
	import {validator,onTowshipData,onPersonUid} from '@/js_sdk/validator/notice.js';
	// import jinEdit from '@/components/jin-edit/jin-edit.vue';
	import { areaPower ,getArea } from "@/js_sdk/manage-area/manage.js";
	const users = uni.getStorageSync("uni-id-pages-userInfo")
	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'notice';
	export default {
		data() {
			let formData = {
				"title": "",
				"images": null,
				"abstract": "",
				"content": "",
				"platform_type":'__UNI__1EEA680' ,
				"is_forced_reading": false,
				"type":{value: 1,name: '平台公告'},
				"area_manage":users.manage_area,
				"targetSend":{
					"platform":"指定标签",
					"label_arr":[],
					"screens_uid":[]
				}
			}
			return {
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "",name: "通知管理" },
					{to: "./list",name: "商家通知" },
					{to: "",name: "新增通知" },
				],
				multipleData:[],
				skip:0,
				targetIndex:0,
				personData:[],
				formData,
				formOptions: {},
				_uid:'',
				aloneData:{},
				rules: {
					...validator
				},
				...publicData
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(ev) {
			if (ev._uid) {
				this._uid = ev._uid
				this.targetIndex = 2
				this.oloneSend()
			}
			// 获取个体用户信息
			this.getPersonData()
		},
		methods: {
			...publicFun,
			oloneSend(){
				db.collection("shop").doc(this._uid).field("_id,title,logo").get({getOne:true}).then( res => {
					let data = res.result.data
					this.aloneData = data
					this.aloneData._id = {
						_value:data._id
					}
					this.formData.targetSend.platform = '单独发送'
					this.formData.targetSend.label_arr = [this.aloneData]
				})
			},
			/**
			 * 验证表单并提交
			 */
			async submit() {
				let multipleData = this.formData.targetSend.label_arr
				if (this.targetIndex === 0) {
					let tampdata = await onTowshipData(multipleData)
					this.formData.targetSend.screens_uid = tampdata.result
				}else if (this.targetIndex === 1) {
					let tampdata =  await onPersonUid(multipleData)
					this.formData.targetSend.screens_uid = tampdata.result
					delete this.formData.targetSend.label_arr
				}else {
					this.formData.targetSend.screens_uid = []
				}
				uni.showLoading({
					mask: true
				})
				this.formData.create_date = Date.now()
				this.$refs.form.validate().then(res => {
					uni.hideLoading()
					return this.submitForm(this.formData)
				}).catch(error => {
					uni.hideLoading()
				})
			},
			/**
			 * 提交表单
			 */
			submitForm(value) {
				// 使用 clientDB 提交数据
				return db.collection(dbCollectionName).add(value).then((res) => {
					uni.showToast({
						title: '新增成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	@import url("store.css");
	.notice{
		padding:50rpx;
	}
</style>